<template>
    <div class="sky-timeline">
        <Timeline  class="boxstyle" v-if="returnVisit.list && returnVisit.list.length">
            <template v-for="(item, index) in returnVisit.list" >
                <TimelineItem v-if="+item.data_type === 2 && item.duration > 0 && (+item.type === 1 || +item.type === 2) || +item.data_type !== 2" :key="index">
                    <p class="time">{{ item.created_at }}</p>
                    <p class="content" v-if="+item.data_type === 1">
                        {{ item.content }}
                    </p>
                    <div class="content" v-else-if="+item.data_type === 2" style="display: flex;flex-direction: column;">
                        <a v-if="+item.callback_id === 0" @click="handleAddrecord(item)">添加记录</a>
                        <span v-if="item.callback_id > 0 && item.duration > 0">{{ item.callback_content }}</span>
                        <audio :id="`audio-${item.id}`" v-if="item.file_url" controls :src="item.file_url" @play="audioplays(item.speed, item.id)"></audio>
                    </div>
                    <p class="content" v-else-if="+item.data_type === 3" style="display: flex;align-items: center;">
                        <a @click="handleAddrecord(item)">添加记录</a>
                    </p>
                    <p class="consultant">
                        <span class="ivu-mr-8" v-if="item.profession_name">{{ item.profession_name }}</span>
                        <span class="ivu-mr-8" v-if="item.member_name">{{ item.member_name }}</span>
                        <Badge status="processing" :text="item.callback_status_name" v-if="item.callback_status_name" class="ivu-mr-8"></Badge>
                        <Badge class="ivu-mr-8" status="warning" v-if="item.callback_way_name" :text="item.callback_way_name"></Badge>
                        <span v-if="item.duration">{{ item.duration }}秒</span>
                        <Icon @click="changeupdate(item)" v-if="(+item.data_type === 2 && +item.type === 1 || +item.type === 2) && item.file_url == '' && item.duration !== ''" class="ivu-ml-8 icon" type="md-sync" color="#19be6b" size="18"></Icon>
                    </p>
                </TimelineItem>
            </template>
        </Timeline>
        <Modal v-model="record" :loading="creating" width="650" title="添加回访" :mask-closable="false" @on-cancel="handleCancel" @on-ok="handleSubmit">
            <Form :label-width="125" ref="create" :rules="createRules" :model="formItem">
                <FormItem label="回访状态：" prop="callback_state_id">
                    <RadioGroup v-model="formItem.callback_state_id">
                        <Radio v-for="item in callbackState" :key="item.value" :label="item.id">{{item.label}}</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="回访内容：" prop="content">
                    <Input v-model="formItem.content" type="textarea" placeholder="请输入回访内容" :autosize="{ minRows: 2, maxRows: 5 }" />
                </FormItem>
                <FormItem label="患者状态：" prop="patient_status_id">
                    <Select v-model="formItem.patient_status_id" v-width="150" :disabled="IsSelect">
                        <Option :disabled="+item.is_select === 0" v-for="item in patientState" :key="item.value" :value="item.value">{{ item.label }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem v-if="+formItem.patient_status_id == 1" label="预到日期" prop="appointment_time">
                    <DatePicker v-model="formItem.appointment_time" type="date" v-width="150"></DatePicker>
                </FormItem>
                <FormItem v-if="formItem.patient_status_id === '1' || formItem.patient_status_id === '2'|| formItem.patient_status_id === '33'|| formItem.patient_status_id === '39'|| formItem.patient_status_id === '42'" label="下次回访时间：" prop="next_callback_time">
                    <InputNumber :step="1" v-width='100' @on-change="blurday(formItem.day)" v-model="formItem.day">
                    </inputNumber><span class="ivu-ml-8 ivu-mr-8">天后-</span>
                    <DatePicker @on-change="handleChangeDate" v-model="formItem.next_callback_time" type="date" v-width="150"></DatePicker>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
import { mapState , mapMutations } from 'vuex';
import { callbackcreate, callbackcallbackcommonlist } from '@/api/hqapi';
import { RetrunVisit } from '@/api/chat';
import dayjs from 'dayjs';
export default {
    name: 'returnVisit',
    computed: {
        ...mapState('chatwebsocket/wechat', ['returnVisit', 'patientInfo', 'currentFriend', 'patientList'])
    },
    props: {
        currentIndex: {
            type: Number,
            default: 0
        }
    },
    
    data() {
        return {
            record: false,
            creating: true,
            IsSelect: false,
            tempItem: {},
            formItem: {
                callback_state_id: '',
                content: '',
                patient_status_id: '',
                appointment_time: '',
                day: 0,
                next_callback_time: '',
            },
            createRules: {
                callback_state_id: [
                    {
                        required: true,
                        message: '请选择回访状态',
                        trigger: 'change'
                    }
                ],
                content: [
                    {
                        required: true,
                        message: '请录入回访内容',
                        trigger: 'blur'
                    }
                ],
                patient_status_id: [
                    {
                        required: true,
                        message: '请选择患者状态',
                        trigger: 'change'
                    }
                ],
                arrive_date: [
                    {
                        required: true,
                        type: 'date',
                        message: '请选择预到日期',
                        trigger: 'change'
                    }
                ],
                next_callback_time: [
                    {
                        required: true,
                        type: 'date',
                        message: '请选择下次回访日期',
                        trigger: 'blur'
                    }
                ]
            },
            patientState: [],
            callbackState: [],
            callbackWay: [],

        };
    },
    methods: {
        ...mapMutations('chatwebsocket/wechat', ['setReturnVisit']),
        handleAddrecord(item) {
            this.tempItem = item;
            this.record = true;
            this.getCallbackState();
            if (this.patientInfo == 4 || this.patientInfo == 5) {
                this.IsSelect = true;
            }
            this.formItem.patient_status_id = this.patientInfo.patient_status_id + '';
            this.formItem.next_callback_time = new Date(this.patientInfo.next_callback_time_str);
            this.formItem.appointment_time = this.patientInfo.appointment_time_str;
            let today = dayjs().format('YYYY-MM-DD');
            let dayNum = dayjs(this.formItem.next_callback_time).diff(today, 'day');
            this.formItem.day = dayNum;
        },
        handleSubmit() {
            this.$refs.create.validate(valid => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.formItem));
                    let callback_way_id = this.tempItem.callback_way_id;
                    callbackcreate(Object.assign(params, {
                        callback_way_id: callback_way_id,
                        patient_user_id: this.patientInfo.id,
                        belong_member_id: '',
                        voice_id: this.tempItem.data_type === '2' ? this.tempItem.id : 0,
                        source_type: 'weiliao'
                    })).then(() => {
                        this.resetForm();
                        this.$Message.success('添加记录成功');
                        this.record = false;
                        this.getCallback();
                    }).finally(() => {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    });
                } else {
                    this.creating = false;
                    this.$nextTick(() => {
                        this.creating = true;
                    });
                }
            });
        },
        getCallback() {
            // console.log('请求数据');
            // console.log(this.currentFriend);
            RetrunVisit({
                patient_user_id: this.patientList[this.currentIndex].id,
                wechatid: this.currentFriend.wechatid,
                friendid: this.currentFriend.friendid,
            }).then(res => {
                this.setReturnVisit(res.list);
            });
        },
        getCallbackState() {
            let params = {
                patient_user_id: this.patientInfo.id,
                start_time: '2020-07-01',
            };
            callbackcallbackcommonlist(params).then(res => {
                this.patientState = res.patient_status;
                this.callbackState = res.callback_status;
                this.callbackWay = res.callback_way;
            });
        },
        /**
         * 修改日期
         */
        blurday (e) {
            let callbackDay;
            callbackDay = dayjs().add(e, 'day').format('YYYY-MM-DD');
            this.formItem.next_callback_time = callbackDay;
        },
        /**
         * 修改日期控件
         */
        handleChangeDate (e) {
            if (e) {
                let dayNum = dayjs(e).diff(dayjs().format('YYYY-MM-DD'), 'day');
                this.formItem.day = dayNum;
            } else {
                this.formItem.day = 0;
            }
        },
        /**
         * 关闭弹窗
         */
        handleCancel () {
            this.record = false;
            this.resetForm();
        },
        resetForm () {
            this.formItem = {
                callback_state_id: '',
                content: '',
                patient_status_id: '',
                appointment_time: '',
                day: 0,
                next_callback_time: '',
            };
        }
    }
};
</script>
<style lang='less'>
.sky-timeline {
    height: 395px;
    overflow: auto;

    .time {
        font-size: 14px;

        font-weight: bold;
    }

    .content {
        padding: 10px 0;
    }

    .consultant {
        color: #9ea7b4;

        .c-inr {
            margin-right: 10px;
        }
    }
}

/deep/.ivu-description-term {
    padding-bottom: 8px;
}

/deep/.ivu-description-detail {
    padding-bottom: 8px;
}
@media only screen and (max-width: 1280px) {
    .boxstyle {
        max-height:80px;
        overflow: auto;
    }
}
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
    .boxstyle {
        max-height:180px;
        overflow: auto;
    }
}
@media only screen and (min-width:1441px) {
    .boxstyle {
        max-height:370px;
        overflow: auto;
    }
}
</style>